<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>珠峰架构师成长计划</title>
    <link rel="stylesheet" type="text/css" href="../static/css/main.css">
</head>
<body>
<div class="nav">
    <div class="logo">
        
            珠峰架构师成长计划
        
    </div>
<ul><li><a href="../index.html">0.Async</a></li><li><a href="../html/0.editor.html">0.editor</a></li><li><a href="../html/0.module.html">0.module</a></li><li><a href="../html/1.ES2015.html">1.ES2015</a></li><li><a href="../html/2.Promise.html">2.Promise</a></li><li><a href="../html/3.Node.html">3.Node</a></li><li><a href="../html/4.NodeInstall.html">4.NodeInstall</a></li><li><a href="../html/5.REPL.html">5.REPL</a></li><li><a href="../html/6.NodeCore.html">6.NodeCore</a></li><li><a href="../html/7.module&NPM.html">7.module&NPM</a></li><li><a href="../html/8.Encoding.html">8.Encoding</a></li><li><a href="../html/9.Buffer.html">9.Buffer</a></li><li><a href="../html/10.fs.html">10.fs</a></li><li><a href="../html/11.Stream-1.html">11.Stream-1</a></li><li><a href="../html/11.Stream-2.html">11.Stream-2</a></li><li><a href="../html/11.Stream-3.html">11.Stream-3</a></li><li><a href="../html/11.Stream-4.html">11.Stream-4</a></li><li><a href="../html/12-Network-2.html">12-Network-2</a></li><li><a href="../html/12.NetWork-3.html">12.NetWork-3</a></li><li><a href="../html/12.Network-1.html">12.Network-1</a></li><li><a href="../html/13.tcp.html">13.tcp</a></li><li><a href="../html/14.http-1.html">14.http-1</a></li><li><a href="../html/14.http-2.html">14.http-2</a></li><li><a href="../html/15.compress.html">15.compress</a></li><li><a href="../html/16.crypto.html">16.crypto</a></li><li><a href="../html/17.process.html">17.process</a></li><li><a href="../html/18.yargs.html">18.yargs</a></li><li><a href="../html/19.cache.html">19.cache</a></li><li><a href="../html/20.action.html">20.action</a></li><li><a href="../html/21.https.html">21.https</a></li><li><a href="../html/22.cookie.html">22.cookie</a></li><li><a href="../html/23.session.html">23.session</a></li><li><a href="../html/24.express-1.html">24.express-1</a></li><li><a href="../html/24.express-2.html">24.express-2</a></li><li><a href="../html/24.express-3.html">24.express-3</a></li><li><a href="../html/24.express-4.html">24.express-4</a></li><li><a href="../html/25.koa-1.html">25.koa-1</a></li><li><a href="../html/26.webpack-1-basic.html">26.webpack-1-basic</a></li><li><a href="../html/26.webpack-2-optimize.html">26.webpack-2-optimize</a></li><li><a href="../html/26.webpack-3.tapable.html">26.webpack-3.tapable</a></li><li><a href="../html/26.webpack-4-AST.html">26.webpack-4-AST</a></li><li class="active"><a href="../html/26.webpack-5-source.html">26.webpack-5-source</a></li><li><a href="../html/26.webpack-6-loader.html">26.webpack-6-loader</a></li><li><a href="../html/26.webpack-7-plugin.html">26.webpack-7-plugin</a></li><li><a href="../html/26.webpack-8-hand.html">26.webpack-8-hand</a></li><li><a href="../html/27.react-1.html">27.react-1</a></li><li><a href="../html/27.react-2.html">27.react-2</a></li><li><a href="../html/27.react-3.html">27.react-3</a></li><li><a href="../html/27.react-4-immutable.html">27.react-4-immutable</a></li><li><a href="../html/27.react-5-react-dom-diff.html">27.react-5-react-dom-diff</a></li><li><a href="../html/27.react-6.html">27.react-6</a></li><li><a href="../html/28.react-mobx.html">28.react-mobx</a></li><li><a href="../html/28.redux-0.html">28.redux-0</a></li><li><a href="../html/28.redux-1.html">28.redux-1</a></li><li><a href="../html/28.redux-2-中间件.html">28.redux-2-中间件</a></li><li><a href="../html/28.redux-3-saga.html">28.redux-3-saga</a></li><li><a href="../html/28.redux-jwt-back.html">28.redux-jwt-back</a></li><li><a href="../html/28.redux-jwt-front.html">28.redux-jwt-front</a></li><li><a href="../html/29.mongodb-1.html">29.mongodb-1</a></li><li><a href="../html/29.mongodb-2.html">29.mongodb-2</a></li><li><a href="../html/29.mongodb-3.html">29.mongodb-3</a></li><li><a href="../html/29.mongodb-4.html">29.mongodb-4</a></li><li><a href="../html/29.mongodb-5.html">29.mongodb-5</a></li><li><a href="../html/29.mongodb-6.html">29.mongodb-6</a></li><li><a href="../html/30.cms-1-mysql.html">30.cms-1-mysql</a></li><li><a href="../html/30.cms-2-mysql.html">30.cms-2-mysql</a></li><li><a href="../html/30.cms-3-mysql.html">30.cms-3-mysql</a></li><li><a href="../html/30.cms-4-egg.html">30.cms-4-egg</a></li><li><a href="../html/30.cms-5-api.html">30.cms-5-api</a></li><li><a href="../html/30.cms-6-roadhog.html">30.cms-6-roadhog</a></li><li><a href="../html/30.cms-7-umi.html">30.cms-7-umi</a></li><li><a href="../html/30.cms-8-dva.html">30.cms-8-dva</a></li><li><a href="../html/30.cms-9-dva.html">30.cms-9-dva</a></li><li><a href="../html/30.cms-10-front.html">30.cms-10-front</a></li><li><a href="../html/30.cms-11-deploy.html">30.cms-11-deploy</a></li><li><a href="../html/33.redis.html">33.redis</a></li><li><a href="../html/34.unittest.html">34.unittest</a></li><li><a href="../html/35.jwt.html">35.jwt</a></li><li><a href="../html/36.websocket-1.html">36.websocket-1</a></li><li><a href="../html/36.websocket-2.html">36.websocket-2</a></li><li><a href="../html/38.chat-api-1.html">38.chat-api-1</a></li><li><a href="../html/38.chat-api-2.html">38.chat-api-2</a></li><li><a href="../html/38.chat-3.html">38.chat-3</a></li><li><a href="../html/38.chat-api-3.html">38.chat-api-3</a></li><li><a href="../html/38.chat.html">38.chat</a></li><li><a href="../html/38.chat2.html">38.chat2</a></li><li><a href="../html/38.chat2.html">38.chat2</a></li><li><a href="../html/39.crawl-0.html">39.crawl-0</a></li><li><a href="../html/39.crawl-1.html">39.crawl-1</a></li><li><a href="../html/39.crawl-2.html">39.crawl-2</a></li><li><a href="../html/40.deploy.html">40.deploy</a></li><li><a href="../html/41.safe.html">41.safe</a></li><li><a href="../html/42.test.html">42.test</a></li><li><a href="../html/43.nginx.html">43.nginx</a></li><li><a href="../html/44.enzyme.html">44.enzyme</a></li><li><a href="../html/45.docker.html">45.docker</a></li><li><a href="../html/46.elastic.html">46.elastic</a></li><li><a href="../html/47.oauth.html">47.oauth</a></li><li><a href="../html/48.wxpay.html">48.wxpay</a></li><li><a href="../html/49.nunjucks.html">49.nunjucks</a></li><li><a href="../html/50.ketang.html">50.ketang</a></li><li><a href="../html/index.html">index</a></li><li><a href="../html/51.typescript.html">51.typescript</a></li><li><a href="../html/52.UML.html">52.UML</a></li><li><a href="../html/53.design.html">53.design</a></li><li><a href="../html/index.html">index</a></li><li><a href="../html/54.linux.html">54.linux</a></li><li><a href="../html/55.yaml.html">55.yaml</a></li><li><a href="../html/50.ketang2.html">50.ketang2</a></li><li><a href="../html/56.ts.html">56.ts</a></li><li><a href="../html/57.ts_react.html">57.ts_react</a></li><li><a href="../html/58.react-ssr.html">58.react-ssr</a></li><li><a href="../html/59.react-ssr.html">59.react-ssr</a></li></ul></div>


<div class="warpper">

    <div class="page-toc">
        <ul><li><a href="#t01. 基本概念">1. 基本概念</a></li><li><a href="#t12. 调试webpack">2. 调试webpack</a><ul><li><a href="#t22.1 debugger.js">2.1 debugger.js</a></li><li><a href="#t32.2 webpack.config.js">2.2 webpack.config.js</a></li></ul></li><li><a href="#t43. 主要工作流程">3. 主要工作流程</a></li><li><a href="#t54. 详细图解">4. 详细图解</a></li><li><a href="#t65. 流程图解">5. 流程图解</a><ul><li><a href="#t75.1 初始化阶段">5.1 初始化阶段</a></li><li><a href="#t85.2 编译阶段">5.2 编译阶段</a></li><li><a href="#t95.3 结束阶段">5.3 结束阶段</a></li></ul></li><li><a href="#t106. 参考">6. 参考</a></li></ul>
    </div>
    
    <div class="content markdown-body">
        <p>&#xFEFF;</p>
<h2 id="t01. &#x57FA;&#x672C;&#x6982;&#x5FF5;">1. &#x57FA;&#x672C;&#x6982;&#x5FF5; <a href="#t01. &#x57FA;&#x672C;&#x6982;&#x5FF5;"> # </a></h2>
<ul>
<li>Entry&#xFF1A;&#x5165;&#x53E3;&#xFF0C;Webpack &#x6267;&#x884C;&#x6784;&#x5EFA;&#x7684;&#x7B2C;&#x4E00;&#x6B65;&#x5C06;&#x4ECE; Entry &#x5F00;&#x59CB;&#xFF0C;&#x53EF;&#x62BD;&#x8C61;&#x6210;&#x8F93;&#x5165;&#x3002;</li>
<li>Module&#xFF1A;&#x6A21;&#x5757;&#xFF0C;&#x5728; Webpack &#x91CC;&#x4E00;&#x5207;&#x7686;&#x6A21;&#x5757;&#xFF0C;&#x4E00;&#x4E2A;&#x6A21;&#x5757;&#x5BF9;&#x5E94;&#x7740;&#x4E00;&#x4E2A;&#x6587;&#x4EF6;&#x3002;Webpack &#x4F1A;&#x4ECE;&#x914D;&#x7F6E;&#x7684; Entry &#x5F00;&#x59CB;&#x9012;&#x5F52;&#x627E;&#x51FA;&#x6240;&#x6709;&#x4F9D;&#x8D56;&#x7684;&#x6A21;&#x5757;&#x3002;</li>
<li>Chunk&#xFF1A;&#x4EE3;&#x7801;&#x5757;&#xFF0C;&#x4E00;&#x4E2A; Chunk &#x7531;&#x591A;&#x4E2A;&#x6A21;&#x5757;&#x7EC4;&#x5408;&#x800C;&#x6210;&#xFF0C;&#x7528;&#x4E8E;&#x4EE3;&#x7801;&#x5408;&#x5E76;&#x4E0E;&#x5206;&#x5272;&#x3002;</li>
<li>Loader&#xFF1A;&#x6A21;&#x5757;&#x8F6C;&#x6362;&#x5668;&#xFF0C;&#x7528;&#x4E8E;&#x628A;&#x6A21;&#x5757;&#x539F;&#x5185;&#x5BB9;&#x6309;&#x7167;&#x9700;&#x6C42;&#x8F6C;&#x6362;&#x6210;&#x65B0;&#x5185;&#x5BB9;&#x3002;</li>
<li>Plugin&#xFF1A;&#x6269;&#x5C55;&#x63D2;&#x4EF6;&#xFF0C;&#x5728; Webpack &#x6784;&#x5EFA;&#x6D41;&#x7A0B;&#x4E2D;&#x7684;&#x7279;&#x5B9A;&#x65F6;&#x673A;&#x4F1A;&#x5E7F;&#x64AD;&#x51FA;&#x5BF9;&#x5E94;&#x7684;&#x4E8B;&#x4EF6;&#xFF0C;&#x63D2;&#x4EF6;&#x53EF;&#x4EE5;&#x76D1;&#x542C;&#x8FD9;&#x4E9B;&#x4E8B;&#x4EF6;&#x7684;&#x53D1;&#x751F;&#xFF0C;&#x5728;&#x7279;&#x5B9A;&#x65F6;&#x673A;&#x505A;&#x5BF9;&#x5E94;&#x7684;&#x4E8B;&#x60C5;&#x3002;</li>
</ul>
<h2 id="t12. &#x8C03;&#x8BD5;webpack">2. &#x8C03;&#x8BD5;webpack <a href="#t12. &#x8C03;&#x8BD5;webpack"> # </a></h2>
<h3 id="t22.1 debugger.js">2.1 debugger.js <a href="#t22.1 debugger.js"> # </a></h3>
<pre><code class="lang-js"><span class="hljs-keyword">var</span> webpackPath=<span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;path&apos;</span>).resolve(__dirname,<span class="hljs-string">&apos;node_modules&apos;</span>, <span class="hljs-string">&apos;webpack-cli&apos;</span>, <span class="hljs-string">&apos;bin&apos;</span>, <span class="hljs-string">&apos;cli.js&apos;</span>);
<span class="hljs-built_in">require</span>(webpackPath);
</code></pre>
<h3 id="t32.2 webpack.config.js">2.2 webpack.config.js <a href="#t32.2 webpack.config.js"> # </a></h3>
<pre><code class="lang-js"><span class="hljs-keyword">const</span> path=<span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;path&apos;</span>);
<span class="hljs-built_in">module</span>.exports={
    <span class="hljs-attr">mode</span>:<span class="hljs-string">&quot;development&quot;</span>,
    <span class="hljs-attr">entry</span>: <span class="hljs-string">&apos;./src/index.js&apos;</span>,
    <span class="hljs-attr">output</span>: {
        <span class="hljs-attr">path</span>: path.resolve(__dirname,<span class="hljs-string">&apos;dist&apos;</span>),
        <span class="hljs-attr">filename</span>:<span class="hljs-string">&apos;bundle.js&apos;</span>
    }
}
</code></pre>
<h2 id="t43. &#x4E3B;&#x8981;&#x5DE5;&#x4F5C;&#x6D41;&#x7A0B;">3. &#x4E3B;&#x8981;&#x5DE5;&#x4F5C;&#x6D41;&#x7A0B; <a href="#t43. &#x4E3B;&#x8981;&#x5DE5;&#x4F5C;&#x6D41;&#x7A0B;"> # </a></h2>
<p>Webpack &#x7684;&#x8FD0;&#x884C;&#x6D41;&#x7A0B;&#x662F;&#x4E00;&#x4E2A;&#x4E32;&#x884C;&#x7684;&#x8FC7;&#x7A0B;&#xFF0C;&#x4ECE;&#x542F;&#x52A8;&#x5230;&#x7ED3;&#x675F;&#x4F1A;&#x4F9D;&#x6B21;&#x6267;&#x884C;&#x4EE5;&#x4E0B;&#x6D41;&#x7A0B;&#xFF1A;</p>
<ul>
<li><code>&#x521D;&#x59CB;&#x5316;&#x53C2;&#x6570;</code>&#xFF1A;&#x4ECE;&#x914D;&#x7F6E;&#x6587;&#x4EF6;&#x548C; Shell &#x8BED;&#x53E5;&#x4E2D;&#x8BFB;&#x53D6;&#x4E0E;&#x5408;&#x5E76;&#x53C2;&#x6570;&#xFF0C;&#x5F97;&#x51FA;&#x6700;&#x7EC8;&#x7684;&#x53C2;&#x6570;&#xFF1B;</li>
<li>&#x5F00;&#x59CB;&#x7F16;&#x8BD1;&#xFF1A;&#x7528;&#x4E0A;&#x4E00;&#x6B65;&#x5F97;&#x5230;&#x7684;&#x53C2;&#x6570;&#x521D;&#x59CB;&#x5316; Compiler &#x5BF9;&#x8C61;&#xFF0C;&#x52A0;&#x8F7D;&#x6240;&#x6709;&#x914D;&#x7F6E;&#x7684;&#x63D2;&#x4EF6;&#xFF0C;&#x6267;&#x884C;&#x5BF9;&#x8C61;&#x7684;run&#x65B9;&#x6CD5;&#x5F00;&#x59CB;&#x6267;&#x884C;&#x7F16;&#x8BD1;&#xFF1B;
&#x786E;&#x5B9A;&#x5165;&#x53E3;&#xFF1A;&#x6839;&#x636E;&#x914D;&#x7F6E;&#x4E2D;&#x7684; entry &#x627E;&#x51FA;&#x6240;&#x6709;&#x7684;&#x5165;&#x53E3;&#x6587;&#x4EF6;</li>
<li>&#x7F16;&#x8BD1;&#x6A21;&#x5757;&#xFF1A;&#x4ECE;&#x5165;&#x53E3;&#x6587;&#x4EF6;&#x51FA;&#x53D1;&#xFF0C;&#x8C03;&#x7528;&#x6240;&#x6709;&#x914D;&#x7F6E;&#x7684; Loader &#x5BF9;&#x6A21;&#x5757;&#x8FDB;&#x884C;&#x7F16;&#x8BD1;&#xFF0C;&#x518D;&#x627E;&#x51FA;&#x8BE5;&#x6A21;&#x5757;&#x4F9D;&#x8D56;&#x7684;&#x6A21;&#x5757;&#xFF0C;&#x518D;&#x9012;&#x5F52;&#x672C;&#x6B65;&#x9AA4;&#x76F4;&#x5230;&#x6240;&#x6709;&#x5165;&#x53E3;&#x4F9D;&#x8D56;&#x7684;&#x6587;&#x4EF6;&#x90FD;&#x7ECF;&#x8FC7;&#x4E86;&#x672C;&#x6B65;&#x9AA4;&#x7684;&#x5904;&#x7406;&#xFF1B;</li>
<li>&#x5B8C;&#x6210;&#x6A21;&#x5757;&#x7F16;&#x8BD1;&#xFF1A;&#x5728;&#x7ECF;&#x8FC7;&#x7B2C;4&#x6B65;&#x4F7F;&#x7528; Loader &#x7FFB;&#x8BD1;&#x5B8C;&#x6240;&#x6709;&#x6A21;&#x5757;&#x540E;&#xFF0C;&#x5F97;&#x5230;&#x4E86;&#x6BCF;&#x4E2A;&#x6A21;&#x5757;&#x88AB;&#x7FFB;&#x8BD1;&#x540E;&#x7684;&#x6700;&#x7EC8;&#x5185;&#x5BB9;&#x4EE5;&#x53CA;&#x5B83;&#x4EEC;&#x4E4B;&#x95F4;&#x7684;&#x4F9D;&#x8D56;&#x5173;&#x7CFB;&#xFF1B;</li>
<li>&#x8F93;&#x51FA;&#x8D44;&#x6E90;&#xFF1A;&#x6839;&#x636E;&#x5165;&#x53E3;&#x548C;&#x6A21;&#x5757;&#x4E4B;&#x95F4;&#x7684;&#x4F9D;&#x8D56;&#x5173;&#x7CFB;&#xFF0C;&#x7EC4;&#x88C5;&#x6210;&#x4E00;&#x4E2A;&#x4E2A;&#x5305;&#x542B;&#x591A;&#x4E2A;&#x6A21;&#x5757;&#x7684; Chunk&#xFF0C;&#x518D;&#x628A;&#x6BCF;&#x4E2A; Chunk &#x8F6C;&#x6362;&#x6210;&#x4E00;&#x4E2A;&#x5355;&#x72EC;&#x7684;&#x6587;&#x4EF6;&#x52A0;&#x5165;&#x5230;&#x8F93;&#x51FA;&#x5217;&#x8868;&#xFF0C;&#x8FD9;&#x6B65;&#x662F;&#x53EF;&#x4EE5;&#x4FEE;&#x6539;&#x8F93;&#x51FA;&#x5185;&#x5BB9;&#x7684;&#x6700;&#x540E;&#x673A;&#x4F1A;&#xFF1B;</li>
<li>&#x8F93;&#x51FA;&#x5B8C;&#x6210;&#xFF1A;&#x5728;&#x786E;&#x5B9A;&#x597D;&#x8F93;&#x51FA;&#x5185;&#x5BB9;&#x540E;&#xFF0C;&#x6839;&#x636E;&#x914D;&#x7F6E;&#x786E;&#x5B9A;&#x8F93;&#x51FA;&#x7684;&#x8DEF;&#x5F84;&#x548C;&#x6587;&#x4EF6;&#x540D;&#xFF0C;&#x628A;&#x6587;&#x4EF6;&#x5185;&#x5BB9;&#x5199;&#x5165;&#x5230;&#x6587;&#x4EF6;&#x7CFB;&#x7EDF;&#x3002;</li>
<li>&#x5728;&#x4EE5;&#x4E0A;&#x8FC7;&#x7A0B;&#x4E2D;&#xFF0C;Webpack &#x4F1A;&#x5728;&#x7279;&#x5B9A;&#x7684;&#x65F6;&#x95F4;&#x70B9;&#x5E7F;&#x64AD;&#x51FA;&#x7279;&#x5B9A;&#x7684;&#x4E8B;&#x4EF6;&#xFF0C;&#x63D2;&#x4EF6;&#x5728;&#x76D1;&#x542C;&#x5230;&#x611F;&#x5174;&#x8DA3;&#x7684;&#x4E8B;&#x4EF6;&#x540E;&#x4F1A;&#x6267;&#x884C;&#x7279;&#x5B9A;&#x7684;&#x903B;&#x8F91;&#xFF0C;&#x5E76;&#x4E14;&#x63D2;&#x4EF6;&#x53EF;&#x4EE5;&#x8C03;&#x7528; Webpack &#x63D0;&#x4F9B;&#x7684; API &#x6539;&#x53D8; Webpack &#x7684;&#x8FD0;&#x884C;&#x7ED3;&#x679C;&#x3002;</li>
</ul>
<h2 id="t54. &#x8BE6;&#x7EC6;&#x56FE;&#x89E3;">4. &#x8BE6;&#x7EC6;&#x56FE;&#x89E3; <a href="#t54. &#x8BE6;&#x7EC6;&#x56FE;&#x89E3;"> # </a></h2>
<p><img src="http://img.zhufengpeixun.cn/webpackcode.jpg" alt="webpackcode"></p>
<h2 id="t65. &#x6D41;&#x7A0B;&#x56FE;&#x89E3;">5. &#x6D41;&#x7A0B;&#x56FE;&#x89E3; <a href="#t65. &#x6D41;&#x7A0B;&#x56FE;&#x89E3;"> # </a></h2>
<h3 id="t75.1 &#x521D;&#x59CB;&#x5316;&#x9636;&#x6BB5;">5.1 &#x521D;&#x59CB;&#x5316;&#x9636;&#x6BB5; <a href="#t75.1 &#x521D;&#x59CB;&#x5316;&#x9636;&#x6BB5;"> # </a></h3>
<table>
<thead>
<tr>
<th style="text-align:left">&#x4E8B;&#x4EF6;&#x540D;</th>
<th style="text-align:left">&#x89E3;&#x91CA;</th>
<th style="text-align:left">&#x4EE3;&#x7801;&#x4F4D;&#x7F6E;</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">&#x8BFB;&#x53D6;&#x547D;&#x4EE4;&#x884C;&#x53C2;&#x6570;</td>
<td style="text-align:left">&#x4ECE;&#x547D;&#x4EE4;&#x884C;&#x4E2D;&#x8BFB;&#x53D6;&#x7528;&#x6237;&#x8F93;&#x5165;&#x7684;&#x53C2;&#x6570;</td>
<td style="text-align:left"><a href="https://github.com/zhufengnodejs/webpack-analysis/blob/master/node_modules/webpack-cli/bin/cli.js#L241"> require(&quot;./convert-argv&quot;)(argv)</a></td>
</tr>
<tr>
<td style="text-align:left">&#x5B9E;&#x4F8B;&#x5316; Compiler</td>
<td style="text-align:left">1.&#x7528;&#x4E0A;&#x4E00;&#x6B65;&#x5F97;&#x5230;&#x7684;&#x53C2;&#x6570;&#x521D;&#x59CB;&#x5316; Compiler &#x5B9E;&#x4F8B;<br>2.Compiler &#x8D1F;&#x8D23;&#x6587;&#x4EF6;&#x76D1;&#x542C;&#x548C;&#x542F;&#x52A8;&#x7F16;&#x8BD1;<br>3.Compiler &#x5B9E;&#x4F8B;&#x4E2D;&#x5305;&#x542B;&#x4E86;&#x5B8C;&#x6574;&#x7684; Webpack &#x914D;&#x7F6E;&#xFF0C;&#x5168;&#x5C40;&#x53EA;&#x6709;&#x4E00;&#x4E2A; Compiler &#x5B9E;&#x4F8B;&#x3002;<br></td>
<td style="text-align:left"><a href="https://github.com/zhufengnodejs/webpack-analysis/blob/master/node_modules/webpack-cli/bin/cli.js#L443">compiler = webpack(options);</a></td>
</tr>
<tr>
<td style="text-align:left">&#x52A0;&#x8F7D;&#x63D2;&#x4EF6;</td>
<td style="text-align:left">1.&#x4F9D;&#x6B21;&#x8C03;&#x7528;&#x63D2;&#x4EF6;&#x7684; apply &#x65B9;&#x6CD5;&#xFF0C;&#x8BA9;&#x63D2;&#x4EF6;&#x53EF;&#x4EE5;&#x76D1;&#x542C;&#x540E;&#x7EED;&#x7684;&#x6240;&#x6709;&#x4E8B;&#x4EF6;&#x8282;&#x70B9;&#x3002;<br>&#x540C;&#x65F6;&#x7ED9;&#x63D2;&#x4EF6;&#x4F20;&#x5165; compiler &#x5B9E;&#x4F8B;&#x7684;&#x5F15;&#x7528;&#xFF0C;&#x4EE5;&#x65B9;&#x4FBF;&#x63D2;&#x4EF6;&#x901A;&#x8FC7; compiler &#x8C03;&#x7528; Webpack &#x63D0;&#x4F9B;&#x7684; API&#x3002;</td>
<td style="text-align:left"><a href="https://github.com/zhufengnodejs/webpack-analysis/blob/master/node_modules/_webpack%404.20.2%40webpack/lib/webpack.js#L42-L50">plugin.apply(compiler)</a></td>
</tr>
<tr>
<td style="text-align:left">&#x5904;&#x7406;&#x5165;&#x53E3;</td>
<td style="text-align:left">&#x8BFB;&#x53D6;&#x914D;&#x7F6E;&#x7684; Entrys&#xFF0C;&#x4E3A;&#x6BCF;&#x4E2A; Entry &#x5B9E;&#x4F8B;&#x5316;&#x4E00;&#x4E2A;&#x5BF9;&#x5E94;&#x7684; EntryPlugin&#xFF0C;&#x4E3A;&#x540E;&#x9762;&#x8BE5; Entry &#x7684;&#x9012;&#x5F52;&#x89E3;&#x6790;&#x5DE5;&#x4F5C;&#x505A;&#x51C6;&#x5907;</td>
<td style="text-align:left"><a href="https://github.com/zhufengnodejs/webpack-analysis/blob/master/node_modules/_webpack%404.20.2%40webpack/lib/WebpackOptionsApply.js#L306">new EntryOptionPlugin().apply(compiler)</a><br><a href="https://github.com/zhufengnodejs/webpack-analysis/blob/master/node_modules/_webpack%404.20.2%40webpack/lib/EntryOptionPlugin.js#L24">new SingleEntryPlugin(context, item, name)</a><br><a href="https://github.com/zhufengnodejs/webpack-analysis/blob/master/node_modules/_webpack%404.20.2%40webpack/lib/SingleEntryPlugin.js#L40-L48">compiler.hooks.make.tapAsync</a></td>
</tr>
</tbody>
</table>
<h3 id="t85.2 &#x7F16;&#x8BD1;&#x9636;&#x6BB5;">5.2 &#x7F16;&#x8BD1;&#x9636;&#x6BB5; <a href="#t85.2 &#x7F16;&#x8BD1;&#x9636;&#x6BB5;"> # </a></h3>
<table>
<thead>
<tr>
<th style="text-align:left">&#x4E8B;&#x4EF6;&#x540D;</th>
<th style="text-align:left">&#x89E3;&#x91CA;</th>
<th style="text-align:left">&#x4EE3;&#x7801;&#x4F4D;&#x7F6E;</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">run</td>
<td style="text-align:left">&#x542F;&#x52A8;&#x4E00;&#x6B21;&#x65B0;&#x7684;&#x7F16;&#x8BD1;</td>
<td style="text-align:left"><a href="https://github.com/zhufengnodejs/webpack-analysis/blob/master/node_modules/_webpack%404.20.2%40webpack/lib/Compiler.js#L263-L271">this.hooks.run.callAsync</a></td>
</tr>
<tr>
<td style="text-align:left">compile</td>
<td style="text-align:left">&#x8BE5;&#x4E8B;&#x4EF6;&#x662F;&#x4E3A;&#x4E86;&#x544A;&#x8BC9;&#x63D2;&#x4EF6;&#x4E00;&#x6B21;&#x65B0;&#x7684;&#x7F16;&#x8BD1;&#x5C06;&#x8981;&#x542F;&#x52A8;&#xFF0C;&#x540C;&#x65F6;&#x4F1A;&#x7ED9;&#x63D2;&#x4EF6;&#x4F20;&#x5165;compiler &#x5BF9;&#x8C61;&#x3002;</td>
<td style="text-align:left"><a href="https://github.com/zhufengnodejs/webpack-analysis/blob/master/node_modules/_webpack%404.20.2%40webpack/lib/Compiler.js#L529-L555">compile(callback)</a></td>
</tr>
<tr>
<td style="text-align:left">compilation</td>
<td style="text-align:left">&#x5F53; Webpack &#x4EE5;&#x5F00;&#x53D1;&#x6A21;&#x5F0F;&#x8FD0;&#x884C;&#x65F6;&#xFF0C;&#x6BCF;&#x5F53;&#x68C0;&#x6D4B;&#x5230;&#x6587;&#x4EF6;&#x53D8;&#x5316;&#xFF0C;&#x4E00;&#x6B21;&#x65B0;&#x7684; Compilation &#x5C06;&#x88AB;&#x521B;&#x5EFA;&#x3002;<br>&#x4E00;&#x4E2A; Compilation &#x5BF9;&#x8C61;&#x5305;&#x542B;&#x4E86;&#x5F53;&#x524D;&#x7684;&#x6A21;&#x5757;&#x8D44;&#x6E90;&#x3001;&#x7F16;&#x8BD1;&#x751F;&#x6210;&#x8D44;&#x6E90;&#x3001;&#x53D8;&#x5316;&#x7684;&#x6587;&#x4EF6;&#x7B49;&#x3002;<br>Compilation &#x5BF9;&#x8C61;&#x4E5F;&#x63D0;&#x4F9B;&#x4E86;&#x5F88;&#x591A;&#x4E8B;&#x4EF6;&#x56DE;&#x8C03;&#x4F9B;&#x63D2;&#x4EF6;&#x505A;&#x6269;&#x5C55;&#x3002;</td>
<td style="text-align:left"><a href="https://github.com/zhufengnodejs/webpack-analysis/blob/master/node_modules/_webpack%404.20.2%40webpack/lib/Compiler.js#L491-L501">newCompilation(params)</a></td>
</tr>
<tr>
<td style="text-align:left">make</td>
<td style="text-align:left">&#x4E00;&#x4E2A;&#x65B0;&#x7684; Compilation &#x521B;&#x5EFA;&#x5B8C;&#x6BD5;&#x4E3B;&#x5F00;&#x59CB;&#x7F16;&#x8BD1;</td>
<td style="text-align:left"><a href="https://github.com/zhufengnodejs/webpack-analysis/blob/master/node_modules/_webpack%404.20.2%40webpack/lib/Compiler.js#L544">this.hooks.make.callAsync</a></td>
</tr>
<tr>
<td style="text-align:left">addEntry</td>
<td style="text-align:left">&#x5373;&#x5C06;&#x4ECE; Entry &#x5F00;&#x59CB;&#x8BFB;&#x53D6;&#x6587;&#x4EF6;</td>
<td style="text-align:left"><a href="https://github.com/zhufengnodejs/webpack-analysis/blob/master/node_modules/_webpack%404.20.2%40webpack/lib/Compilation.js#L1027">compilation.addEntry</a><br><a href="https://github.com/zhufengnodejs/webpack-analysis/blob/master/node_modules/_webpack%404.20.2%40webpack/lib/Compilation.js#L1047">this._addModuleChain</a></td>
</tr>
<tr>
<td style="text-align:left">moduleFactory</td>
<td style="text-align:left">&#x521B;&#x5EFA;&#x6A21;&#x5757;&#x5DE5;&#x5382;</td>
<td style="text-align:left"><a href="https://github.com/zhufengnodejs/webpack-analysis/blob/master/node_modules/_webpack%404.20.2%40webpack/lib/Compilation.js#L933">const moduleFactory = this.dependencyFactories.get(Dep)</a></td>
</tr>
<tr>
<td style="text-align:left">create</td>
<td style="text-align:left">&#x521B;&#x5EFA;&#x6A21;&#x5757;</td>
<td style="text-align:left"><a href="https://github.com/zhufengnodejs/webpack-analysis/blob/master/node_modules/_webpack%404.20.2%40webpack/lib/NormalModuleFactory.js#L369-L409">moduleFactory.create</a></td>
</tr>
<tr>
<td style="text-align:left">factory</td>
<td style="text-align:left">&#x5F00;&#x59CB;&#x521B;&#x5EFA;&#x6A21;&#x5757;</td>
<td style="text-align:left"><a href="https://github.com/zhufengnodejs/webpack-analysis/blob/master/node_modules/_webpack%404.20.2%40webpack/lib/NormalModuleFactory.js#L396-L406">factory(result, (err, module)</a><br><a href="https://github.com/zhufengnodejs/webpack-analysis/blob/master/node_modules/_webpack%404.20.2%40webpack/lib/NormalModuleFactory.js#L129">resolver(result</a><br><a href="https://github.com/zhufengnodejs/webpack-analysis/blob/master/node_modules/_webpack%404.20.2%40webpack/lib/NormalModuleFactory.js#L159">this.hooks.resolver.tap(&quot;NormalModuleFactory&quot;</a></td>
</tr>
<tr>
<td style="text-align:left">resolveRequestArray</td>
<td style="text-align:left">&#x89E3;&#x6790;loader&#x8DEF;&#x5F84;</td>
<td style="text-align:left"><a href="https://github.com/zhufengnodejs/webpack-analysis/blob/master/node_modules/_webpack%404.20.2%40webpack/lib/NormalModuleFactory.js#L411">resolveRequestArray</a></td>
</tr>
<tr>
<td style="text-align:left">resolve</td>
<td style="text-align:left">&#x89E3;&#x6790;&#x8D44;&#x6E90;&#x6587;&#x4EF6;&#x8DEF;&#x5F84;</td>
<td style="text-align:left"><a href="https://github.com/zhufengnodejs/webpack-analysis/blob/master/node_modules/_enhanced-resolve%404.1.0%40enhanced-resolve/lib/Resolver.js#L136">resolve</a></td>
</tr>
<tr>
<td style="text-align:left">userRequest</td>
<td style="text-align:left">&#x5F97;&#x5230;&#x5305;&#x62EC;loader&#x5728;&#x5185;&#x7684;&#x8D44;&#x6E90;&#x6587;&#x4EF6;&#x7684;&#x7EDD;&#x5BF9;&#x8DEF;&#x5F84;&#x7528;!&#x62FC;&#x8D77;&#x6765;&#x7684;&#x5B57;&#x7B26;&#x4E32;</td>
<td style="text-align:left"><a href="https://github.com/zhufengnodejs/webpack-analysis/blob/master/node_modules/_webpack%404.20.2%40webpack/lib/NormalModuleFactory.js#L254-L259">userRequest</a></td>
</tr>
<tr>
<td style="text-align:left">ruleSet.exec</td>
<td style="text-align:left">&#x5B83;&#x53EF;&#x4EE5;&#x6839;&#x636E;&#x6A21;&#x5757;&#x8DEF;&#x5F84;&#x540D;&#xFF0C;&#x5339;&#x914D;&#x51FA;&#x6A21;&#x5757;&#x6240;&#x9700;&#x7684;loader</td>
<td style="text-align:left"><a href="https://github.com/zhufengnodejs/webpack-analysis/blob/master/node_modules/_webpack%404.20.2%40webpack/lib/NormalModuleFactory.js#L270-L279">this.ruleSet.exec</a></td>
</tr>
<tr>
<td style="text-align:left">_run</td>
<td style="text-align:left">&#x5B83;&#x53EF;&#x4EE5;&#x6839;&#x636E;&#x6A21;&#x5757;&#x8DEF;&#x5F84;&#x540D;&#xFF0C;&#x5339;&#x914D;&#x51FA;&#x6A21;&#x5757;&#x6240;&#x9700;&#x7684;loader</td>
<td style="text-align:left"><a href="https://github.com/zhufengnodejs/webpack-analysis/blob/master/node_modules/_webpack%404.20.2%40webpack/lib/RuleSet.js#L485-L558">_run</a></td>
</tr>
<tr>
<td style="text-align:left">loaders</td>
<td style="text-align:left">&#x5F97;&#x5230;&#x6240;&#x6709;&#x7684;loader&#x6570;&#x7EC4;</td>
<td style="text-align:left"><a href="https://github.com/zhufengnodejs/webpack-analysis/blob/master/node_modules/_webpack%404.20.2%40webpack/lib/NormalModuleFactory.js#L338">results[0].concat(loaders, results[1], results[2])</a></td>
</tr>
<tr>
<td style="text-align:left">getParser</td>
<td style="text-align:left">&#x83B7;&#x53D6;AST&#x89E3;&#x6790;&#x5668;</td>
<td style="text-align:left"><a href="https://github.com/zhufengnodejs/webpack-analysis/blob/master/node_modules/_webpack%404.20.2%40webpack/lib/NormalModuleFactory.js#L357">this.getParser(type, settings.parser)</a></td>
</tr>
<tr>
<td style="text-align:left">buildModule</td>
<td style="text-align:left">&#x5F00;&#x59CB;&#x7F16;&#x8BD1;&#x6A21;&#x5757;</td>
<td style="text-align:left"><a href="https://github.com/zhufengnodejs/webpack-analysis/blob/master/node_modules/_webpack%404.20.2%40webpack/lib/Compilation.js#L996-L1009">this.buildModule(module</a><br><a href="https://github.com/zhufengnodejs/webpack-analysis/blob/master/node_modules/_webpack%404.20.2%40webpack/lib/Compilation.js#L602-L656">buildModule(module, optional, origin, dependencies, thisCallback)</a></td>
</tr>
<tr>
<td style="text-align:left">build</td>
<td style="text-align:left">&#x5F00;&#x59CB;&#x771F;&#x6B63;&#x7F16;&#x8BD1;&#x5165;&#x53E3;&#x6A21;&#x5757;</td>
<td style="text-align:left"><a href="https://github.com/zhufengnodejs/webpack-analysis/blob/master/node_modules/_webpack%404.20.2%40webpack/lib/NormalModule.js#L396-L469">build(options</a></td>
</tr>
<tr>
<td style="text-align:left">doBuild</td>
<td style="text-align:left">&#x5F00;&#x59CB;&#x771F;&#x6B63;&#x7F16;&#x8BD1;&#x5165;&#x53E3;&#x6A21;&#x5757;</td>
<td style="text-align:left"><a href="https://github.com/zhufengnodejs/webpack-analysis/blob/master/node_modules/_webpack%404.20.2%40webpack/lib/NormalModule.js#L257-L330">doBuild</a></td>
</tr>
<tr>
<td style="text-align:left">&#x6267;&#x884C;loader</td>
<td style="text-align:left">&#x4F7F;&#x7528;loader&#x8FDB;&#x884C;&#x8F6C;&#x6362;</td>
<td style="text-align:left"><a href="https://github.com/zhufengnodejs/webpack-analysis/blob/master/node_modules/_webpack%404.20.2%40webpack/lib/NormalModule.js#L265">runLoaders</a><br><a href="https://github.com/zhufengnodejs/webpack-analysis/blob/master/node_modules/_loader-runner%402.3.1%40loader-runner/lib/LoaderRunner.js#L242">runLoaders</a></td>
</tr>
<tr>
<td style="text-align:left">iteratePitchingLoaders</td>
<td style="text-align:left">&#x5F00;&#x59CB;&#x9012;&#x5F52;&#x6267;&#x884C;pitch loader</td>
<td style="text-align:left"><a href="https://github.com/zhufengnodejs/webpack-analysis/blob/master/node_modules/_loader-runner%402.3.1%40loader-runner/lib/LoaderRunner.js#L362">iteratePitchingLoaders</a></td>
</tr>
<tr>
<td style="text-align:left">loadLoader</td>
<td style="text-align:left">&#x52A0;&#x8F7D;loader</td>
<td style="text-align:left"><a href="https://github.com/zhufengnodejs/webpack-analysis/blob/master/node_modules/_loader-runner%402.3.1%40loader-runner/lib/loadLoader.js#L13">loadLoader</a></td>
</tr>
<tr>
<td style="text-align:left">runSyncOrAsync</td>
<td style="text-align:left">&#x6267;&#x884C;pitchLoader</td>
<td style="text-align:left"><a href="https://github.com/zhufengnodejs/webpack-analysis/blob/master/node_modules/_loader-runner%402.3.1%40loader-runner/lib/LoaderRunner.js#L175-L188">runSyncOrAsync</a></td>
</tr>
<tr>
<td style="text-align:left">processResource</td>
<td style="text-align:left">&#x5F00;&#x59CB;&#x5904;&#x7406;&#x8D44;&#x6E90;</td>
<td style="text-align:left"><a href="https://github.com/zhufengnodejs/webpack-analysis/blob/master/node_modules/_loader-runner%402.3.1%40loader-runner/lib/LoaderRunner.js#L192">processResource</a><br><a href="https://github.com/zhufengnodejs/webpack-analysis/blob/master/node_modules/_loader-runner%402.3.1%40loader-runner/lib/LoaderRunner.js#L199">options.readResource</a><br><a href="https://github.com/zhufengnodejs/webpack-analysis/blob/master/node_modules/_loader-runner%402.3.1%40loader-runner/lib/LoaderRunner.js#L202">iterateNormalLoaders</a><br><a href="https://github.com/zhufengnodejs/webpack-analysis/blob/master/node_modules/_loader-runner%402.3.1%40loader-runner/lib/LoaderRunner.js#L209-L235">iterateNormalLoaders</a></td>
</tr>
<tr>
<td style="text-align:left">createSource</td>
<td style="text-align:left">&#x521B;&#x5EFA;&#x6E90;&#x4EE3;&#x7801;&#x5BF9;&#x8C61;</td>
<td style="text-align:left"><a href="https://github.com/zhufengnodejs/webpack-analysis/blob/master/node_modules/_webpack%404.20.2%40webpack/lib/NormalModule.js#L316"> this.createSource</a></td>
</tr>
<tr>
<td style="text-align:left">parse</td>
<td style="text-align:left">&#x4F7F;&#x7528;parser&#x8F6C;&#x6362;&#x62BD;&#x8C61;&#x8BED;&#x6CD5;&#x6811;</td>
<td style="text-align:left"><a href="https://github.com/zhufengnodejs/webpack-analysis/blob/master/node_modules/_webpack%404.20.2%40webpack/lib/NormalModule.js#L445-L467">this.parser.parse</a></td>
</tr>
<tr>
<td style="text-align:left">parse</td>
<td style="text-align:left">&#x89E3;&#x6790;&#x62BD;&#x8C61;&#x8BED;&#x6CD5;&#x6811;</td>
<td style="text-align:left"><a href="https://github.com/zhufengnodejs/webpack-analysis/blob/master/node_modules/_webpack%404.20.2%40webpack/lib/Parser.js#2022">parse(source, initialState)</a></td>
</tr>
<tr>
<td style="text-align:left">acorn.parse</td>
<td style="text-align:left">&#x89E3;&#x6790;&#x8BED;&#x6CD5;&#x6811;</td>
<td style="text-align:left"><a href="https://github.com/zhufengnodejs/webpack-analysis/blob/master/node_modules/_webpack%404.20.2%40webpack/lib/Parser.js#L2158">acorn.parse(code, parserOptions)</a></td>
</tr>
<tr>
<td style="text-align:left">ImportDependency</td>
<td style="text-align:left">&#x904D;&#x5386;&#x5E76;&#x6DFB;&#x52A0;&#x6DFB;&#x52A0;&#x4F9D;&#x8D56;</td>
<td style="text-align:left"><a href="https://github.com/zhufengnodejs/webpack-analysis/blob/master/node_modules/_webpack%404.20.2%40webpack/lib/dependencies/HarmonyImportDependencyParserPlugin.js#L28">parser.state.module.addDependency(clearDep)</a></td>
</tr>
<tr>
<td style="text-align:left">succeedModule</td>
<td style="text-align:left">&#x751F;&#x6210;&#x8BED;&#x6CD5;&#x6811;&#x540E;&#x5C31;&#x8868;&#x793A;&#x4E00;&#x4E2A;&#x6A21;&#x5757;&#x7F16;&#x8BD1;&#x5B8C;&#x6210;</td>
<td style="text-align:left"><a href="https://github.com/zhufengnodejs/webpack-analysis/blob/master/node_modules/_webpack%404.20.2%40webpack/lib/Compilation.js#L652">this.hooks.succeedModule.call(module)</a></td>
</tr>
<tr>
<td style="text-align:left">processModuleDependencies</td>
<td style="text-align:left">&#x9012;&#x5F52;&#x7F16;&#x8BD1;&#x4F9D;&#x8D56;&#x7684;&#x6A21;&#x5757;</td>
<td style="text-align:left"><a href="https://github.com/zhufengnodejs/webpack-analysis/blob/master/node_modules/_webpack%404.20.2%40webpack/lib/Compilation.js#L980">this.processModuleDependencies(module</a><br><a href="https://github.com/zhufengnodejs/webpack-analysis/blob/master/node_modules/_webpack%404.20.2%40webpack/lib/Compilation.js#L663">processModuleDependencies(module, callback)</a><br><a href="https://github.com/zhufengnodejs/webpack-analysis/blob/master/node_modules/_webpack%404.20.2%40webpack/lib/Compilation.js#L716">this.addModuleDependencies</a><br><a href="https://github.com/zhufengnodejs/webpack-analysis/blob/master/node_modules/_webpack%404.20.2%40webpack/lib/Compilation.js#L859">buildModule</a></td>
</tr>
<tr>
<td style="text-align:left">make&#x540E;</td>
<td style="text-align:left">&#x7ED3;&#x675F;make</td>
<td style="text-align:left"><a href="https://github.com/zhufengnodejs/webpack-analysis/blob/master/node_modules/_webpack%404.20.2%40webpack/lib/Compiler.js#L545">this.hooks.make.callAsync(compilation, err =&gt; {}</a></td>
</tr>
<tr>
<td style="text-align:left">finish</td>
<td style="text-align:left">&#x7F16;&#x8BD1;&#x5B8C;&#x6210;</td>
<td style="text-align:left"><a href="https://github.com/zhufengnodejs/webpack-analysis/blob/master/node_modules/_webpack%404.20.2%40webpack/lib/Compiler.js#L547">compilation.finish();</a></td>
</tr>
</tbody>
</table>
<h3 id="t95.3 &#x7ED3;&#x675F;&#x9636;&#x6BB5;">5.3 &#x7ED3;&#x675F;&#x9636;&#x6BB5; <a href="#t95.3 &#x7ED3;&#x675F;&#x9636;&#x6BB5;"> # </a></h3>
<table>
<thead>
<tr>
<th style="text-align:left">&#x4E8B;&#x4EF6;&#x540D;</th>
<th style="text-align:left">&#x89E3;&#x91CA;</th>
<th style="text-align:left">&#x4EE3;&#x7801;&#x4F4D;&#x7F6E;</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">seal</td>
<td style="text-align:left">&#x5C01;&#x88C5;</td>
<td style="text-align:left"><a href="https://github.com/zhufengnodejs/webpack-analysis/blob/master/node_modules/_webpack%404.20.2%40webpack/lib/Compiler.js#L549">compilation.seal</a><br><a href="https://github.com/zhufengnodejs/webpack-analysis/blob/master/node_modules/_webpack%404.20.2%40webpack/lib/Compilation.js#L1159-L1301">seal(callback)</a></td>
</tr>
<tr>
<td style="text-align:left">addChunk</td>
<td style="text-align:left">&#x751F;&#x6210;&#x8D44;&#x6E90;</td>
<td style="text-align:left"><a href="https://github.com/zhufengnodejs/webpack-analysis/blob/master/node_modules/_webpack%404.20.2%40webpack/lib/Compilation.js#L1400">addChunk(name)</a></td>
</tr>
<tr>
<td style="text-align:left">createChunkAssets</td>
<td style="text-align:left">&#x521B;&#x5EFA;&#x8D44;&#x6E90;</td>
<td style="text-align:left"><a href="https://github.com/zhufengnodejs/webpack-analysis/blob/master/node_modules/_webpack%404.20.2%40webpack/lib/Compilation.js#L1270">this.createChunkAssets()</a></td>
</tr>
<tr>
<td style="text-align:left">getRenderManifest</td>
<td style="text-align:left">&#x83B7;&#x5F97;&#x8981;&#x6E32;&#x67D3;&#x7684;&#x63CF;&#x8FF0;&#x6587;&#x4EF6;</td>
<td style="text-align:left"><a href="https://github.com/zhufengnodejs/webpack-analysis/blob/master/node_modules/_webpack%404.20.2%40webpack/lib/MainTemplate.js#L355-L360">getRenderManifest(options)</a></td>
</tr>
<tr>
<td style="text-align:left">render</td>
<td style="text-align:left">&#x6E32;&#x67D3;&#x6E90;&#x7801;</td>
<td style="text-align:left"><a href="https://github.com/zhufengnodejs/webpack-analysis/blob/master/node_modules/_webpack%404.20.2%40webpack/lib/Compilation.js#L2369">source = fileManifest.render();</a></td>
</tr>
<tr>
<td style="text-align:left">afterCompile</td>
<td style="text-align:left">&#x7F16;&#x8BD1;&#x7ED3;&#x675F;</td>
<td style="text-align:left"><a href="https://github.com/zhufengnodejs/webpack-analysis/blob/master/node_modules/_webpack%404.20.2%40webpack/lib/Compiler.js##L552">this.hooks.afterCompile</a></td>
</tr>
<tr>
<td style="text-align:left">shouldEmit</td>
<td style="text-align:left">&#x6240;&#x6709;&#x9700;&#x8981;&#x8F93;&#x51FA;&#x7684;&#x6587;&#x4EF6;&#x5DF2;&#x7ECF;&#x751F;&#x6210;&#x597D;&#xFF0C;&#x8BE2;&#x95EE;&#x63D2;&#x4EF6;&#x54EA;&#x4E9B;&#x6587;&#x4EF6;&#x9700;&#x8981;&#x8F93;&#x51FA;&#xFF0C;&#x54EA;&#x4E9B;&#x4E0D;&#x9700;&#x8981;&#x3002;</td>
<td style="text-align:left"><a href="https://github.com/zhufengnodejs/webpack-analysis/blob/master/node_modules/_webpack%404.20.2%40webpack/lib/Compiler.js##L215">this.hooks.shouldEmit</a></td>
</tr>
<tr>
<td style="text-align:left">emit</td>
<td style="text-align:left">&#x786E;&#x5B9A;&#x597D;&#x8981;&#x8F93;&#x51FA;&#x54EA;&#x4E9B;&#x6587;&#x4EF6;&#x540E;&#xFF0C;&#x6267;&#x884C;&#x6587;&#x4EF6;&#x8F93;&#x51FA;&#xFF0C;&#x53EF;&#x4EE5;&#x5728;&#x8FD9;&#x91CC;&#x83B7;&#x53D6;&#x548C;&#x4FEE;&#x6539;&#x8F93;&#x51FA;&#x5185;&#x5BB9;&#x3002;</td>
<td style="text-align:left"><a href="https://github.com/zhufengnodejs/webpack-analysis/blob/master/node_modules/_webpack%404.20.2%40webpack/lib/Compiler.js##L228">this.emitAssets(compilation</a><br><a href="https://github.com/zhufengnodejs/webpack-analysis/blob/master/node_modules/_webpack%404.20.2%40webpack/lib/Compiler.js##L363-L367">this.hooks.emit.callAsync</a><br><a href="https://github.com/zhufengnodejs/webpack-analysis/blob/master/node_modules/_webpack%404.20.2%40webpack/lib/Compiler.js##L308-L361">const emitFiles = err</a><br><a href="https://github.com/zhufengnodejs/webpack-analysis/blob/master/node_modules/_webpack%404.20.2%40webpack/lib/Compiler.js##L338">this.outputFileSystem.writeFile</a></td>
</tr>
<tr>
<td style="text-align:left">this.emitRecords</td>
<td style="text-align:left">&#x5199;&#x5165;&#x8BB0;&#x5F55;</td>
<td style="text-align:left"><a href="https://github.com/zhufengnodejs/webpack-analysis/blob/master/node_modules/_webpack%404.20.2%40webpack/lib/Compiler.js##L249">this.emitRecords</a></td>
</tr>
<tr>
<td style="text-align:left">done</td>
<td style="text-align:left">&#x5168;&#x90E8;&#x5B8C;&#x6210;</td>
<td style="text-align:left"><a href="https://github.com/zhufengnodejs/webpack-analysis/blob/master/node_modules/_webpack%404.20.2%40webpack/lib/Compiler.js##L255">this.hooks.done.callAsync</a></td>
</tr>
</tbody>
</table>
<h2 id="t106. &#x53C2;&#x8003;">6. &#x53C2;&#x8003; <a href="#t106. &#x53C2;&#x8003;"> # </a></h2>
<ul>
<li><a href="https://github.com/zhufengnodejs/webpack-analysis">webpack-analysis</a></li>
<li><a href="https://alienzhou.github.io/webpack-internal-plugin-relation/">webpack-internal-plugin-relation</a></li>
</ul>

        <div class="copyright">Powered by <a href="https://github.com/jaywcjlove/idoc" target="_blank">idoc</a>. Dependence <a href="https://nodejs.org">Node.js</a> run.</div>
    </div>
    
</div>

<script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.js"></script>
<script>
$('.warpper .page-toc ul ul li a').on('click',function(){
  $('.warpper .page-toc ul ul li a').removeClass('my-active')
  $(this).addClass('my-active')
})
  // if (!$('.understand-me').length) {
  //   var bar = $(window).height() - $('.navbar ').height() - $('.page-toc').position().top;
  //   var count = bar / 26 / 2;
  //   var barHeight = $('.page-toc').outerHeight();
  //   $('.page-toc li').eq(0).children('a').addClass('red');
  //   var arr = [];
  //   $("h1,h2,h3,h4,h5,h6").each(function () {
  //     arr.push($(this).position().top);
  //   });
  //   var timer
  //   function dark() {
  //     clearTimeout(timer)
  //      timer = setTimeout(function () {
  //      var top = Math.abs($('.page-toc > ul').position().top);
  //      var cur = $('.content').scrollTop();
  //      for (var i = arr.length; i >= 0; i--) {
  //        if (arr[i] <= cur) {
  //          break;
  //        }
  //      }
  //      if (i === -1) {
  //        i = 0;
  //      }
  //      $('.page-toc li a').removeClass('red');
  //      $('.page-toc li').eq(i).children('a').addClass('red');
  //      let height = $('.page-toc li').eq(i).position().top-$('.page-toc').height(); // 如果当前的offset出去了 回到中间可好？
  //      $('.page-toc').scrollTop(height+$('.page-toc').height()/2);
  //    },200)
  //   }

  //   $('.content').on('scroll', dark);
  // }
</script>
<style>

    /* ::-webkit-scrollbar{width:14px;}
    ::-webkit-scrollbar-track{background-color:transparent;}
    ::-webkit-scrollbar-thumb{background-color:transparent;}
    ::-webkit-scrollbar-thumb:hover {background-color:transparent}
    ::-webkit-scrollbar-thumb:active {background-color:transparent} */

    .page-toc > ul .red {
        background: #f3f3f3;
        z-index: 1;
        border-left: 3px solid #009a61;
        -webkit-transition: all .2s ease;
        transition: all .2s ease;
        color: #000
    }





</style>
</body>
</html>
